<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Dự án làng nghề thạch thất</title>
<!--Thư viện hiệu ứng animate-->
<link href="css/animate.min.css" rel="stylesheet" type="text/css">
<!--Thư viện icon font-awesome-->
<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!--Reset css về mặc định trên các trình duyệt-->
<link href="css/normalize.css" rel="stylesheet" type="text/css"/>
<!--Css dùng chung -->
<link href="css/reset.css" rel="stylesheet" type="text/css"/>
<!-- Css cho supperslides -->
<link rel="stylesheet" type="text/css" href="css/superslides.css">
<!-- Css cho jcarousellite -->
<link rel="stylesheet" type="text/css" href="css/nqh-carousel.css">
<!--Css chính cho toàn trang -->
<link href="css/style.css" rel="stylesheet" type="text/css"/>
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<!--Jquery -->
<script src="js/jquery-1.11.1.js"></script>


</head>
<body>
<div id="fb-root"></div>
	<script>(function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/vi_VN/sdk.js#xfbml=1&appId=818469638219622&version=v2.0";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>

<header class="itq-header"> 
	<section class="all">
    	<nav class="navigation">
        	<ul class="main">
            	<li class="main"> <a href="#" class="main">trang chủ</a></li>
                <li class="main"> <a href="#" class="main">giới thiệu</a></li>
                <li class="main"> <a href="#" class="main">sản phẩm</a>
                	
                	<ul class="child">
                    	<section class="arrow"></section>
                    	<li class="child"><a href="#">làng mây tre đan</a></li>
                        <li class="child"><a href="#">làng lụa</a></li>
                        <li class="child"><a href="#">làng gốm</a></li>
                        <li class="child"><a href="#">làng trạm khắc</a></li>
                        <li class="child"><a href="#">làng mộc</a></li>
                    </ul>
                
                </li>
                <li class="main"> <a href="#" class="main"> sự kiện</a></li>
                <li class="main"> <a href="#" class="main">hội làng nghề</a>
                	
                </li>  
                <li class="main"> <a href="#" class="main">liên kết</a></li> 
                <li class="main"> <a href="#" class="main">Liên hệ</a></li> 
            </ul>
             <section class="seach">
        
                <form action="" method="get">
                    <input type="text" class="keyword" name="keyword" id="keyword" placeholder="Từ khóa tìm kiếm...">
                    <button type="submit" class="submit_seach" id="submit_seach"  >
                    <img src="images/seach.png" alt="">
                    </button>
                </form>
            </section><!--seach-->
  		 </nav>
     </section>  <!-- .all -->  
</header><!-- .itq-header -->
<section class="clear"></section>
  
<section class="itq-wrapper">  
  <section class="itq-slider">
    	<section class="wrapper">
			<header>
				<h3>Làng nghề truyền thống</h3>
				<p>Huyện Thạch Thất</p>
			</header>
        	<section id="slides">
				<section class="slides-container">
					<img src="uploads/slide-1.png" alt="">
					<img src="uploads/slide-1.png" alt="">
					<img src="uploads/slide-1.png" alt="">
					<img src="uploads/slide-1.png" alt="">
				</section>
				<!--<nav class="slides-navigation">
					<a href="#" class="next">Next</a>
					<a href="#" class="prev">Previous</a>
				</nav>-->
			</section>
			<section class="itq-maps-control">
				<a href="#" class="show"><img src="images/logo-maps.png"></a>
                <figure>
                	<img src="uploads/logo.png">
                </figure>
			</section>
			<section class="itq-details-maps">
				<a href="#" class="hidden">
					<img src="images/control.png" alt="">
				</a>
				
				<section class="itq-address">
					<form action="" method="">
						<ul class="ndt-list">
							<li class="list-village-1">
								<figure>
									<a href="#"><img src="images/lang-nghe-1.png" alt=""></a>
									<figcaption>
										<h3>Làng nghề Hương Ngãi</h3>
										<select>
											<option value="">Chi tiết</option>
											<option value="">Saab</option>
											<option value="">Mercedes</option>
											<option value="">Audi</option>
										</select>
									</figcaption>
								</figure>
							</li>
							<li class="list-village-2">
								<figure>
									<a href="#"><img src="images/lang-nghe-2.png" alt=""></a>
									<figcaption>
										<h3>Làng nghề Hương Ngãi</h3>
										<select>
											<option value="">Chi tiết</option>
											<option value="">Saab</option>
											<option value="">Mercedes</option>
											<option value="">Audi</option>
										</select>
									</figcaption>
								</figure>
							</li>
							<li class="list-village-3">
								<figure>
									<a href="#"><img src="images/lang-nghe-3.png" alt=""></a>
									<figcaption>
										<h3>Làng nghề Hương Ngãi</h3>
										<select>
											<option value="">Chi tiết</option>
											<option value="">Saab</option>
											<option value="">Mercedes</option>
											<option value="">Audi</option>
										</select>
									</figcaption>
								</figure>
							</li>
							<li class="list-village-4">
								<figure>
									<a href="#"><img src="images/lang-nghe-4.png" alt=""></a>
									<figcaption>
										<h3>Làng nghề Hương Ngãi</h3>
										<select>
											<option value="">Chi tiết</option>
											<option value="">Saab</option>
											<option value="">Mercedes</option>
											<option value="">Audi</option>
										</select>
									</figcaption>
								</figure>
							</li>
							<li class="list-village-5">
								<figure>
									<a href="#"><img src="images/lang-nghe-5.png" alt=""></a>
									<figcaption>
										<h3>Làng nghề Hương Ngãi</h3>
										<select>
											<option value="">Chi tiết</option>
											<option value="">Saab</option>
											<option value="">Mercedes</option>
											<option value="">Audi</option>
										</select>
									</figcaption>
								</figure>
							</li>
							<li class="list-village-6">
								<figure>
									<a href="#"><img src="images/lang-nghe-6.png" alt=""></a>
									<figcaption>
										<h3>Làng nghề Hương Ngãi</h3>
										<select>
											<option value="">Chi tiết</option>
											<option value="">Saab</option>
											<option value="">Mercedes</option>
											<option value="">Audi</option>
										</select>
									</figcaption>
								</figure>
							</li>
							<li class="list-village-7">
								<figure>
									<a href="#"><img src="images/lang-nghe-7.png" alt=""></a>
									<figcaption>
										<h3>Làng nghề Hương Ngãi</h3>
										<select>
											<option value="">Chi tiết</option>
											<option value="">Saab</option>
											<option value="">Mercedes</option>
											<option value="">Audi</option>
										</select>
									</figcaption>
								</figure>
							</li>
							
							<li class="list-village-8">
								<figure>
									<a href="#"><img src="images/lang-nghe-8.png" alt=""></a>
									<figcaption>
										<h3>Làng nghề Hương Ngãi</h3>
										<select>
											<option value="">Chi tiết</option>
											<option value="">Saab</option>
											<option value="">Mercedes</option>
											<option value="">Audi</option>
										</select>
									</figcaption>
								</figure>
							</li>
						</ul>
					</form>
				</section>
			</section><!-- .itq-details-maps-->
			
			<section class="itq-option-village">
				<form action="" method="">
					<ul class="ndt-list-option">
						<li class="ndt-list-option">
							<h3>
								<a href="#">Lựa chọn nghề</a>
							</h3>
							<ul class="ndt-option">
								<li class="ndt-option">
									<a href="#">Lựa chọn làng nghề</a>
								</li>
								<li class="ndt-option">
									<a href="#">Lựa chọn nghề</a>
								</li>
								<li class="ndt-option">
									<a href="#">Lựa chọn nghề</a>
								</li>
								<li class="ndt-option">
									<a href="#">Lựa chọn nghề</a>
								</li>
							</ul>
						</li>
						<li class="ndt-list-option">
							<h3>
								<a href="#">Lựa chọn nghề</a>
							</h3>
							<ul class="ndt-option">
								<li class="ndt-option">
									<a href="#">Lựa chọn nghề</a>
								</li>
								<li class="ndt-option">
									<a href="#">Lựa chọn nghề</a>
								</li>
								<li class="ndt-option">
									<a href="#">Lựa chọn nghề</a>
								</li>
								<li class="ndt-option">
									<a href="#">Lựa chọn nghề</a>
								</li>
							</ul>
						</li>
					</ul>
				</form>
			</section><!-- .itq-option-village-->
			
        </section>
		<section class="clear"></section>
    </section><!-- .itq-slider -->
  <section class="clear"></section>
  <section class="itq-container">
    <section class="itq-content">
      
      <section class="nqh-box-module">
		<section class="nqh-title-module">
			<ul>
				<li><h3><a href="">THAM QUAN LÀNG NGHỀ</a></h3></li>
				<li><h3><a href="">LỊCH SỬ HÌNH THÀNH</a></h3></li>
				<li><h3><a href="">SỰ KIỆN</a></h3></li>
				<li><h3><a href="">SỰ KIỆN</a></h3></li>
				<li><h3><a href="">VĂN BẢN</a></h3></li>
				<li><h3><a href="">VIDEO</a></h3></li>
				<li><h3><a href="">HÌNH ẢNH</a></h3></li>
			</ul>
		</section>
		<section class="clr"></section>
		<section class="list-place">
			<ul>
				<li><a href="#">Hương Ngài</a></li>
				<li><a href="#">Canh Nậu</a></li>
				<li><a href="#">Dị Nậu</a></li>
				<li><a href="#">Chàng Sơn</a></li>
				<li><a href="#">Thạch Xá</a></li>
				<li><a href="#">Bình Phú</a></li>
				<li><a href="#">Hữu Bằng</a></li>
				<li><a href="#">Phùng Xá</a></li>
			</ul>
			<figure>
				<img src="uploads/nqh-product.png" alt="" />
				<figcaption>
					mô tả bla bla
				</figcaption>
			</figure>
		</section><!-- .list-place-->
		<section class="nqh-product">
			<section class="nqh-list-product">
				<h3>DANH MỤC SẢN PHẨM</h3>
				<ul>
					<li><h4><a href="#">Sản phẩm 1</a></h4></li>
					<li><h4><a href="#">Sản phẩm 2</a></h4></li>
					<li><h4><a href="#">Sản phẩm 3</a></h4></li>
					<li><h4><a href="#">Sản phẩm 4</a></h4></li>
					<li><h4><a href="#">Sản phẩm 5</a></h4></li>
					<li><h4><a href="#">Sản phẩm 6</a></h4></li>
					<li><h4><a href="#">Sản phẩm 7</a></h4></li>
				</ul>
			</section><!--.nqh-list-product-->
			<section class="detail-list-product">
				<ul>
					<li>
						<figure>
							<img src="uploads/nqh-product-detail.png" alt="" />
							<figcaption>
								<p><span class="name-product">Tên s/p  :</span>  <span class="detail-name">Tranh điêu khắc</span></p>
								<p><span class="name-product">Tên DN  :</span><span class="detail-name">Đồ gỗ hùng phát</span></p>
								<a href="#">Chi tiết</a>
							</figcaption>
						</figure>
					</li>
					<li>
						<figure>
							<img src="uploads/nqh-product-detail.png" alt="" />
							<figcaption>
								<p><span class="name-product">Tên s/p  :</span>  <span class="detail-name">Tranh điêu khắc</span></p>
								<p><span class="name-product">Tên DN  :</span><span class="detail-name">Đồ gỗ hùng phát</span></p>
								<a href="#">Chi tiết</a>
							</figcaption>
						</figure>
					</li>
					<li>
						<figure>
							<img src="uploads/nqh-product-detail.png" alt="" />
							<figcaption>
								<p><span class="name-product">Tên s/p  :</span>  <span class="detail-name">Tranh điêu khắc</span></p>
								<p><span class="name-product">Tên DN  :</span><span class="detail-name">Đồ gỗ hùng phát</span></p>
								<a href="#">Chi tiết</a>
							</figcaption>
						</figure>
					</li>
					<li>
						<figure>
							<img src="uploads/nqh-product-detail.png" alt="" />
							<figcaption>
								<p><span class="name-product">Tên s/p  :</span>  <span class="detail-name">Tranh điêu khắc</span></p>
								<p><span class="name-product">Tên DN  :</span><span class="detail-name">Đồ gỗ hùng phát</span></p>
								<a href="#">Chi tiết</a>
							</figcaption>
						</figure>
					</li>
					<li>
						<figure>
							<img src="uploads/nqh-product-detail.png" alt="" />
							<figcaption>
								<p><span class="name-product">Tên s/p  :</span>  <span class="detail-name">Tranh điêu khắc</span></p>
								<p><span class="name-product">Tên DN  :</span><span class="detail-name">Đồ gỗ hùng phát</span></p>
								<a href="#">Chi tiết</a>
							</figcaption>
						</figure>
					</li>
					<li>
						<figure>
							<img src="uploads/nqh-product-detail.png" alt="" />
							<figcaption>
								<p><span class="name-product">Tên s/p  :</span>  <span class="detail-name">Tranh điêu khắc</span></p>
								<p><span class="name-product">Tên DN  :</span><span class="detail-name">Đồ gỗ hùng phát</span></p>
								<a href="#">Chi tiết</a>
							</figcaption>
						</figure>
					</li>
					<li>
						<figure>
							<img src="uploads/nqh-product-detail.png" alt="" />
							<figcaption>
								<p><span class="name-product">Tên s/p  :</span>  <span class="detail-name">Tranh điêu khắc</span></p>
								<p><span class="name-product">Tên DN  :</span><span class="detail-name">Đồ gỗ hùng phát</span></p>
								<a href="#">Chi tiết</a>
							</figcaption>
						</figure>
					</li>
					<li>
						<figure>
							<img src="uploads/nqh-product-detail.png" alt="" />
							<figcaption>
								<p><span class="name-product">Tên s/p  :</span>  <span class="detail-name">Tranh điêu khắc</span></p>
								<p><span class="name-product">Tên DN  :</span><span class="detail-name">Đồ gỗ hùng phát</span></p>
								<a href="#">Chi tiết</a>
							</figcaption>
						</figure>
					</li>
					<li>
						<figure>
							<img src="uploads/nqh-product-detail.png" alt="" />
							<figcaption>
								<p><span class="name-product">Tên s/p  :</span>  <span class="detail-name">Tranh điêu khắc</span></p>
								<p><span class="name-product">Tên DN  :</span><span class="detail-name">Đồ gỗ hùng phát</span></p>
								<a href="#">Chi tiết</a>
							</figcaption>
						</figure>
					</li>
				</ul>
			</section><!--.detail-list-product-->
		</section><!--.nqh-product-->
        <section class="clear"></section>
	  </section><!-- .nqh-box-module-->
    </section><!-- .itq-content-->
    <aside class="itq-sidebar">
          <section class="news">
              <header>
                  <h3>TIN TỨC NỔI BẬT</h3>
                  <h4>Làng nghề truyền thống huyện Thạch Thất</h4>
              </header>
              <ul>
                  <li>
                      <figure>
                          <img src="uploads/news-1.jpg" alt="">
                          <figcaption>
                              <p>Làng mộc Chàng Sơn được coi là quê hương của các sản phẩm đồ gốm </p>
                              <a href="#">Xem tiếp<img src="images/next.png" alt=""></a>
                          </figcaption>
                      </figure>
                  </li>
                  <li>
                      <figure>
                          <img src="uploads/news-2.jpg" alt="">
                          <figcaption>
                              <p>Làng mộc Chàng Sơn được coi là quê hương của các sản phẩm đồ gốm </p>
                              <a href="#">Xem tiếp<img src="images/next.png" alt=""></a>
                          </figcaption>
                      </figure>
                  </li>
              </ul>
          </section>
          <section class="fanpage">
              <header>
                  <h3>FANPAGE</h3>
                  <ul>
                      <li><a class="icon" href="#"><img src="images/g+.png" alt=""></a></li>
                      <li><a class="icon" href="#"><img src="images/tw.png" alt=""></a></li>
                      <li><a class="icon" href="#"><img src="images/ytb.png" alt=""></a></li>
                  </ul>
              </header>
              <section class="page">
                  <section class="fb-like-box" data-href="https://www.facebook.com/FacebookDevelopers" data-width="241px" data-height="250px" data-colorscheme="light" data-show-faces="true" data-header="false" data-stream="false" data-show-border="false"></section>
              </section>
          </section>
      </aside><!-- .itq-sidebar -->
  </section>
  <!-- .itq-container-->
  <section class="clear"></section>
</section><!-- .itq-wrapper -->

   
<footer class="itq-footer">
	<section class="all">
      <!--Slider footer-->
      <section class="carousel">
          <ul>
              <li><a href="#"><img src="uploads/adv-1.png"></a></li>
              <li><a href="#"><img src="uploads/adv-2.png"></a></li>
              <li><a href="#"><img src="uploads/adv-3.png"></a></li>
              <li><a href="#"><img src="uploads/adv-1.png"></a></li>
              <li><a href="#"><img src="uploads/adv-2.png"></a></li>
              <li><a href="#"><img src="uploads/adv-3.png"></a></li>
              <li><a href="#"><img src="uploads/adv-1.png"></a></li>
              <li><a href="#"><img src="uploads/adv-2.png"></a></li>
              <li><a href="#"><img src="uploads/adv-3.png"></a></li>
              <li><a href="#"><img src="uploads/adv-1.png"></a></li>
              <li><a href="#"><img src="uploads/adv-2.png"></a></li>
              <li><a href="#"><img src="uploads/adv-3.png"></a></li>
              <li><a href="#"><img src="uploads/adv-1.png"></a></li>
              <li><a href="#"><img src="uploads/adv-2.png"></a></li>
              <li><a href="#"><img src="uploads/adv-3.png"></a></li>
              <li><a href="#"><img src="uploads/adv-1.png"></a></li>
              <li><a href="#"><img src="uploads/adv-2.png"></a></li>
              <li><a href="#"><img src="uploads/adv-3.png"></a></li>
              <li><a href="#"><img src="uploads/adv-1.png"></a></li>
              <li><a href="#"><img src="uploads/adv-2.png"></a></li>
              <li><a href="#"><img src="uploads/adv-3.png"></a></li>
              <li><a href="#"><img src="uploads/adv-1.png"></a></li>
              <li><a href="#"><img src="uploads/adv-2.png"></a></li>
              <li><a href="#"><img src="uploads/adv-3.png"></a></li>
          </ul>
      </section>
      
      <section class="bottom-footer">
          <section class="wrapper-footer">
              <section class="dev">
                  <p>Copyright 2014 by: Royaldesign.vn - Design & Developer by: <a href="#">ITQ.VN</a></p>
              </section>
              <nav>
                  <ul class="menu">
                      <li class="menu"><a href="#">TRANG CHỦ</a></li>
                      <li class="menu"><a href="#">GIỚI THIỆU</a></li>
                      <li class="menu"><a href="#">SỰ KIỆN</a></li>
                      <li class="menu"><a href="#">HỘI LÀNG NGHỀ</a></li>
                      <li class="menu"><a href="#">LIÊN KẾT</a></li>
                      <li class="menu"><a href="#">LIÊN HỆ</a></li>
                  </ul>
              </nav>
          </section><!--end .wrapper-footer-->
      </section><!--end .bottom-footer-->
   </section>  <!-- .all --> 
</footer><!-- .itq-footer -->
  <section class="clear"></section>

<!-- NDT - Thư viện supperslides --> 
<script src="js/jquery.jcarousellite.min.js"></script>
<script src="js/supperslide/jquery.easing.1.3.js"></script>
 
<!--<script src="js/supperslide/jquery.animate-enhanced.min.js"></script>--> 

<script src="js/supperslide/hammer.min.js"></script> 
<script src="js/supperslide/jquery.superslides.min.js"></script> 
<script src="js/jcarousellite_1.0.1.min.js" type="text/javascript"></script>
<script src="js/supperslide/jquery.easing.1.3.js"></script>
<script src="js/supperslide/jquery.animate-enhanced.min.js"></script>
<script src="js/supperslide/hammer.min.js"></script>
<script src="js/supperslide/jquery.superslides.min.js"></script>

<script>
	  $(document).ready(function(){
			$(".hidden").click(function(){
				$(".itq-details-maps").fadeOut();
			});
			$(".show").click(function(){
				$(".itq-details-maps").toggle('fast');
			});
			 $('ul.main li.main').hover(function(e) {
			  $(this).find('ul.child').fadeIn('fast')
			     },function(e) {
			  $(this).find('ul.child').fadeOut('fast')
			});
			$(".carousel").jCarouselLite({
				auto: 5000,
				speed: 500,
				visible: 10
			});
			$('.icon').hover(function(e) {
					 $(this).addClass('animated rubberBand');
				},function(e) {
					 $(this).removeClass('animated rubberBand');
				});
				
				
			$('ul.ndt-option').hide();
			  $("li.ndt-list-option").each(function(index){
				  if($(this).children().length > 1){
					  //$(this).css("background", "url(http://www.worldhypertensionleague.org/Images/SmallDownArrow.png) no-repeat right 15px");
				  }
			  });	
			$('.ndt-list-option > h3').click(function() {
				$(this).next().slideToggle('fast', function() {
					//set arrow depending on whether menu is shown or hidden
					if ($(this).is(':hidden')) {
						//$(this).parent().css("background", "url(http://www.worldhypertensionleague.org/Images/SmallDownArrow.png)no-repeat right 15px");
		
					} else {
						//$(this).parent().css("background", "url(http://www.logan.ws/images/small_up_arrow_icon.gif) no-repeat right 15px");
		
					}
					return false;
				});
		
			});	    
		
		});
		
		
		
	  $(function() {
		$('#slides').superslides({
			<!-- hashchange: true -->
			play:7000,
			pagination:true,
			hashchange:false,
			auto: true,
			inherit_width_from:'.itq-slider',
			inherit_height_from:'.itq-slider'
		});
	  });
	  $(function() {
            $(".nonCircular .nqh-carousel").jCarouselLite({
                btnNext: ".nonCircular .next",
                btnPrev: ".nonCircular .prev",
                circular: true
            });
        });

</script>
</body>
</html>